.adm-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  --color: var(--adm-color-weak);
  --dot-size: 4px;
  &-dot {
    position: relative;
    width: var(--dot-size);
    height: var(--dot-size);
    margin: 0 var(--dot-size);
    background-color: var(--color);
    border-radius: 1px;
    animation: 2s linear infinite loading-dot-up-down;
    &:nth-child(2) {
      animation-delay: 0.2s;
    }
    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
  &-mini {
    --dot-size: 2px;
    padding: 5px 3px;
  }
  &-small {
    --dot-size: 3px;
    padding: 6px 4px;
  }
  &-large {
    --dot-size: 5px;
    padding: 14px 10px;
  }
}

@keyframes loading-dot-up-down {
  0% {
    top: 0;
  }
  10% {
    top: calc(var(--dot-size) * -1.2);
  }
  30% {
    top: calc(var(--dot-size) * 1.2);
  }
  40% {
    top: 0;
  }
}
